<template>
  <div class="join">
    <div class="lf bj-center" style="background-image: url('https://qjsc.oss-cn-beijing.aliyuncs.com/images/system/config/shop_apply_banner/shop_apply_banner_img_1.jpg');">
      <!-- <carousel  :imgdata="imgdata" :height="443"></carousel> -->
          <a class="btn-larger" href="/article/45.html" target="_blank">立即入驻</a>
    
    </div>
    <el-row type="flex" class="row-bg" justify="space-around">
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
    <div class="index-center">
      <div class="wrapper">
        <div class="info-box">
          <div class="title">
            <p>了解骑境商城</p>
            <div class="title-sub">骑境商城是由马上有车电子商务有...</div>
          </div>
          <a class="btn btn-primary btn-larger" href="/article/37.html" target="_blank">查询</a>
        </div>

        <div class="info-box">
          <div class="title">
            <p>查看入驻协议</p>
            <div class="title-sub">骑境商城商家入驻协议由协议正文...</div>
          </div>
          <a class="btn btn-primary btn-larger" href="/article/45.html" target="_blank">查询</a>
        </div>

        <div class="info-box">
          <div class="title">
            <p>我的入驻进度？</p>
            <div class="title-sub">欢迎入驻本商城，了解我的入驻进度</div>
          </div>
          <a class="btn btn-primary btn-larger" href="/shop/apply/progress.html">查看入驻进度</a>
          <!--查看入驻进度按钮已转移到banner上面显示-->
        </div>
        <div class="info-box info-list">
          <div class="title">
            <h2>信息公告</h2>
          </div>
          <div class="mess-list">
            <ul>
              <li>
                <a href="/article/42.html" target="_blank">2018年资费标准</a>
              </li>
              <li>
                <a href="/article/41.html" target="_blank">热招品牌</a>
              </li>

              <li>
                <a href="/article/40.html" target="_blank">店铺类型介绍</a>
              </li>

              <li>
                <a href="/article/39.html" target="_blank">店铺命名规则</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import carousel from "@/components/carousel/carousel";

export default {
  data() {
    return {
      imgdata: [
        {
          src:
            "https://qjsc.oss-cn-beijing.aliyuncs.com/images/system/config/shop_apply_banner/shop_apply_banner_img_1.jpg"
        }
      ]
    };
  },
  methods: {},
  components: {
    carousel
  }
};
</script>


<style lang="scss" type="text/css" scoped>
@import "../../common/style.scss";
.join {
  width: 100%;
  // height: 800px;
}
.lf {
  position: relative;
  top: -11px;
  margin: 0 auto;
  height: 443px;
  .btn-larger{
    position: absolute;
    width: 100px;
    top: 58%;
    left: 50%;
    margin-left: -50px;
    text-align: center;
    padding: 15px 5px;
    color: white;
    background-color: #db4343;
    background-color: $main-color12;
  }
}
.index-center {
  margin: 50px auto;
  height: 150px;
  text-align: center;
}
.wrapper {
  width: 1210px;
  margin: 0 auto;
  position: relative;
  font-size: 13px;
}
.info-box {
  float: left;
  display: inline;
  border-right: 1px solid #eee;
  height: 140px;
  width: 290px;
}
.info-box:last-child {
  border-right: none;
}
.info-list {
  text-align: left;
  .title{
    margin-left: 1em;
  }
  .mess-list{
    line-height: 20px;
    margin-left: 1em;
  }
}
.info-box .title{
  p{
    font-size: 2em;
    margin-bottom: 10px;

  }
  .title-sub{
    font-size: 0.8em;
    margin-bottom: 20px;
    color: #666;
  }
}
.info-box{
a.btn-larger,
.btn-larger {
  min-width: 120px;
  font-size: 16px;
  border-radius: 4px;
  height: 44px;
  line-height: 44px;
  padding: 15px 20px;
  margin-top: 10px;
  color: white;
  background-color: $main-color12;
}
}

</style>
